<template>
    <div class="order-container">
        <el-row>
            <el-col :span="24">
                <normal-filter :filterProps="filterProps" />
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="openAdd">添加题目</el-button>
        </el-row>
        <el-row class="table-container">
            <Table
                :columnProps="columnProps"
                :tableData="tableData"
                :showHandle="true"
                :showDetailBtn="true"
                :pagination="pagination"
                @currentPage="goCurrent"
                @detail="goDetail"
                @delete="onDel"
                @modify="openEdit"
                @sizeChange="sizeChange"
            >
            </Table>
        </el-row>
        <el-dialog :visible.sync="showDetail" title="题目详情" width="400px">
            <el-card>
                <el-row>
                    <el-col :span="24" class="detail-item">
                        <span>题目类型：</span>
                        <span>{{ tmTypeEnum[tmForm.type] || "-" }}</span>
                    </el-col>
                    <el-col :span="24" class="detail-item">
                        <span>题目名称：</span>
                        <span>{{ tmForm.name || "-" }}</span>
                    </el-col>
                    <el-col :span="24" class="detail-item" v-if="tmForm.type !== 'fill'">
                        <div class="tmxx-container">
                            <span>题目选项：</span>
                            <div>
                                <div class="detail-item tmxx" v-for="(item, index) in tmForm.tmXxList" :key="index">{{ index + 1 }}：{{ item.name }}</div>
                            </div>
                        </div>
                    </el-col>
                    <!-- <el-col :span="24" class="detail-item">
                        <span>创建时间：</span>
                        <span>{{ tmForm.createTime || "-" }}</span>
                        </el-col> -->
                </el-row>
            </el-card>
        </el-dialog>
        <!-- 添加、编辑题目 -->
        <el-dialog :visible.sync="showDialog" :title="dialogTitle">
            <el-form ref="form" :model="tmForm" label-width="100px">
                <el-row>
                    <el-form-item label="题目名称：" prop="name" :rules="[{ required: true, message: '题目名称不能为空' }]">
                        <el-input v-model="tmForm.name" placeholder="请输入题目名称"></el-input>
                    </el-form-item>
                    <!-- <el-form-item
                        label="排序"
                        prop="sort"
                        :rules="[{ required: true, message: '排序不能为空' }]"
                        >
                        <el-input
                            style="width: 400px"
                            type="number"
                            v-model="tmForm.sort"
                            placeholder="请输入排序"
                        ></el-input>
                        </el-form-item> -->
                    <el-form-item label="题目类型:" prop="type">
                        <el-radio-group v-model="tmForm.type">
                            <el-radio label="fill">填空题</el-radio>
                            <el-radio label="single">单选题</el-radio>
                            <el-radio label="multi">多选题</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="tmForm.type !== 'fill'" :rules="[{ required: true, message: '选项内容不能为空' }]" label="题目选项:" prop="tmXxList">
                        <el-form-item
                            :rules="[{ required: true, message: '选项内容不能为空' }]"
                            v-for="(item, index) in tmForm.tmXxList"
                            :key="item.index"
                            label-width="50px"
                            :label="`${index + 1}、`"
                            class="item-tmxx"
                            :prop="'tmXxList.' + index + '.name'"
                        >
                            <el-row :gutter="10">
                                <el-col :span="20"><el-input v-model="item.name" placeholder="请输入内容"></el-input></el-col>
                                <el-col :span="2"><el-button class="minus" size="mini" icon="el-icon-minus" circle @click="delTmxx(index)"></el-button></el-col>
                            </el-row>
                        </el-form-item>
                        <el-button size="mini" icon="el-icon-plus" circle @click="addTmxx"></el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import normalFilter from "@/components/NormalFilter";
    import { Message } from "element-ui";
    import Upload from "@/components/UploadFile";
    import Table from "@/components/Table";
    import { tmList, tmDetail, tmAdd, tmDelete, tmEdit } from "@/api/subject";
    import { pagination, page } from "@/utils/enumConfig";

    const tmTypeEnum = {
        fill: "填空题",
        single: "单选题",
        multi: "多选题",
    };
    export default {
        name: "subject",
        components: {
            normalFilter,
            Table,
            Upload,
        },
        data() {
            const filterProps = {
                filterItems: [
                    {
                        type: "input",
                        id: "name",
                        title: "题目名",
                        placeholder: "请输入",
                        width: 400,
                    },
                ],
                onFilterChange: (value) => {
                    this.filterParam = value;
                    this.tmList({
                        ...value,
                        ...page,
                    });
                },
            };
            const columnProps = [
                {
                    title: "题目名称",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "题目类型",
                    dataIndex: "type",
                    key: "type",
                    render: (record) => {
                        return `<span>${tmTypeEnum[record.type] || "-"}</span>`;
                    },
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    width: 200,
                },
            ];
            return {
                showDialog: false,
                dialogTitle: "",
                tmForm: {
                    id: "",
                    name: "",
                    sort: "",
                    type: "fill",
                    tmXxList: [],
                    status: 1,
                },
                subForm: {},
                loading: false,
                showImportModal: false,
                filterProps,
                columnProps,
                list: [],
                tableData: [],
                pagination: this.$_.cloneDeep(pagination),
                filterParam: null,
                show: false,
                curItem: {},
                file: null,
                showDetail: false,
                tmTypeEnum,
            };
        },
        async created() {
            let { pageIndex, pageSize } = this.pagination;

            let param = {
                current: pageIndex,
                size: pageSize,
            };
            this.tmList(param);
        },
        methods: {
            addContent() {
                this.$router.push("/order/add");
            },
            goCurrent(currentIndex) {
                console.log(currentIndex);
                let { pageSize, pageIndex } = this.pagination;
                let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
                this.tmList(param);
            },
            async tmList(param) {
                let { records, size, total, current } = await tmList(param),
                    page = this.pagination;
                this.pagination = {
                    ...page,
                    totalElements: total,
                    pageIndex: current,
                };
                this.tableData = records;
            },
            async goDetail({ id }) {
                this.tmForm = await tmDetail({ id });
                this.showDetail = true;
            },
            async onDel({ id }) {
                let res = await tmDelete({ id });
                if (res.code === 1) {
                    let { pageIndex } = this.pagination;
                    Message.success("删除成功！");
                    this.tmList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.tmList(param);
    },
            openAdd() {
                this.dialogTitle = "添加题目";
                if (this.$refs.form) {
                    this.$refs.form.resetFields();
                    this.tmForm = {
                        id: "",
                        name: "",
                        sort: "",
                        type: "fill",
                        tmXxList: [],
                        status: 1,
                    };
                }
                this.showDialog = true;
            },
            async openEdit({ id }) {
                this.dialogTitle = "编辑题目";
                this.tmForm = await tmDetail({ id });
                this.showDialog = true;
            },
            addTmxx() {
                let tmXxList = this.tmForm.tmXxList;
                tmXxList.push({
                    name: "",
                });
                this.tmForm.tmXxList = tmXxList;
                this.subForm["xx" + (tmXxList.length - 1)] = "";
                console.log(this.subForm);
            },
            delTmxx(index) {
                let tmXxList = this.tmForm.tmXxList;
                tmXxList.splice(index, 1);
                console.log("tmXxList", tmXxList);
                this.tmForm.tmXxList = tmXxList;
            },
            onSubmit() {
                const { validate } = this.$refs["form"];
                // const { validate: test1 } = this.$refs["subForm"];
                // test1(valid => {
                //   if (valid) {
                //   }
                // });
                validate((valid) => {
                    if (valid) {
                        this._submitData(this.tmForm);
                    }
                });
            },
            async _submitData(params) {
                if (params.sort) params["sort"] = parseInt(params.sort);
                // if (params.tmXxList) {
                //     params.tmXxList = params.tmXxList.map((item) => ({ name: item.name }));
                // }
                let res = !this.tmForm.id ? await tmAdd(params) : await tmEdit(params);
                if (res && res.code === 1) {
                    Message({
                        message: "保存成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    this.tmList()
                    this.showDialog = false;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .order-container {
        width: 100%;
        height: 100%;
        padding: 20px;
        .table-container {
            margin-top: 20px;
        }
        .send-btn {
            margin: 10px 0;
        }
    }
    .detail-item {
        margin: 10px 0;
    }
    .tmxx-container {
        display: flex;
        .tmxx {
        }
    }
    .item-tmxx {
        margin-bottom: 20px;
    }
</style>
